/* * @Author: Yejing * @Date: 2023-06-21 16:54:07 * @LastEditors: Yejing * @LastEditTime: 2023-06-27 17:02:13 *
@Description: 申请成为主播 */
<template>
	<view class="anchor-for-apply-page">
		<c-layout>
			<c-navigation-bar :title="$t('user.BecomeAnchor')" slot="head"></c-navigation-bar>
			<view class="container-box">
				<view class="top">
					<view class="box">
						<text>{{ $t('login.account') }}:</text>
						<text>{{ vuex_user_info.userName }}</text>
					</view>
				</view>
				<titleInput :disabled="form.status" v-model="form.firstName" focusColor="#2934D0" :title="$t('user.givenName')">
				</titleInput>
				<titleInput :disabled="form.status" v-model="form.lastName" focusColor="#2934D0" :title="$t('user.surname')">
				</titleInput>
				<!-- <titleInput v-model="form.carNum"   focusColor="#2934D0" :rule="/[\W]/g"  :title="$t('user.IDNumber')"> -->
				<!-- </titleInput> -->
				<view class="" style="margin: 30rpx 0">{{ $t('user.documentType') }}</view>
				<uni-data-checkbox selectedColor="#2934D0" :disabled="form.status" v-model="form.documentType"
					:localdata="certificate"></uni-data-checkbox>
				<text class="title">{{ $t('user.Authentication') }}</text>
				<!-- 省份正 -->
				<view class="upload" v-if="form.documentType === '2'">
					<view class="file">
						<view class="info" @click="upload(1)">
							<u-image v-if="carAfter" width="100%" height="100%" :src="carAfter"></u-image>
							<u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock.png"></u-image>
						</view>
						<view class="hint">{{ $t('user.UploadFront') }}</view>
					</view>
					<view class="file mb">
						<view class="info" @click="upload(2)">
							<u-image v-if="carBefore" width="100%" height="100%" :src="carBefore"></u-image>
							<u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock.png"></u-image>
						</view>
						<view class="hint">{{ $t('user.UploadBack') }}</view>
					</view>
				</view>
				<!-- 护照 -->
				<view class="upload" v-else>
					<view class="file mb">
						<view class="info" @click="upload(3)">
							<u-image v-if="passportPage" width="100%" height="100%" :src="passportPage"></u-image>
							<u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock.png"></u-image>
						</view>
						<view class="hint">{{ $t('user.passportFront') }}</view>
					</view>
				</view>
				<!-- <text class="title">主播头像</text>
                <view class="upload mb">
                    <view class="file">
                        <view class="info" @click="">
                            <u-image v-if="avatar" width="100%" height="100%" :src="avatar"></u-image>
                            <u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock2.png"></u-image>
                        </view>
                        <view class="hint">设置主播头像</view>
                    </view>

                </view> -->
				<!-- <titleInput v-model="form.phone" focusColor="#2934D0" title="手机号码">
                </view> -->
				<!-- 手机号 -->
				<titleInput :disabled="form.status" class="input-box" :rule="'[^\\w@.]'" :maxlength="11" valKey="telphone"
					type="number" v-model="phoneNumber" :title="$t('login.reigsterInputList[3].val')">
					<view class="" slot="left-icon">
						<!-- <view  class="" @click="showAreaCode = true" style="width: 200rpx">+{{ phoneAreaNumber }}</view> -->
						<areaCode v-if="!form.status" @getAreaId="asss" ref="areaCode" :phoneAreaNumber="phoneAreaNumber"></areaCode>
						<view v-else >
							+{{phoneAreaNumber}}
						</view>
					</view>
				</titleInput>
				<titleInput v-if="!form.status" class="input-box" :rule="'[^\\w@.]'" :maxlength="6" valKey="captcha"
					type="number" v-model="form.smsCode" :title="$t('login.reigsterInputList[4].val')">
					<view class="" slot="right-icon">
						<u-verification-code :seconds="seconds" ref="uCode" changeText="xs"
							:start-text="$t('login.loginOther.send')" :end-text="$t('login.loginOther.regain')"
							@change="codeChange"></u-verification-code>
						<u-button @tap="getCode" style="color: #2934d0">{{ tips }}</u-button>
					</view>
				</titleInput>
				<!-- 邮箱 -->

			</view>
			<view slot="footer" class="footer">
				<u-button class="footer" @click="submit(buttonText)" :style="{
						background:
							buttonText == $t('storeManagement.UnderReview')
								? '#F2F3F5'
								: buttonText == $t('user.ClickToSign')
								? 'linear-gradient(225deg, #FFA068 0%, #FD6F5E 100%)'
								: '',
						color: buttonText == $t('storeManagement.UnderReview') ? '#000000' : ''
					}">
					{{ buttonText }}
				</u-button>
				<view class="hint">{{ hint }}</view>
				<view class="hint" v-if="buttonText != $t('user.ClickToSign')">{{ $t('storeManagement.reviewTips2') }}</view>
			</view>
			<!-- <u-select  @confirm="confirmArea" v-model="showAreaCode" :list="countries" value-name="tel" label-name="country"></u-select> -->
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showAreaCode: false,
				phoneAreaNumber: 1,
				countries: [],
				phoneNumber: null,
				seconds: 10,
				seconds2: 10,
				// 验证码
				tips: '',
				tips2: '',
				certificate: [{
						text: this.$t('user.identityCard'),
						value: '2'
					},
					{
						text: this.$t('user.passport'),
						value: '1'
					}
				],
				form: {
					firstName: '',
					lastName: '',
					avatar: '',
					carAfter: '',
					carBefore: '',
					documentType:'2',
					phone: '',
					passportPage: '',
					type: 3,
					smsCode: '',
				},
				carAfter: '',
				carBefore: '',
				passportPage: '',
				avatar: '',
				buttonText: this.$t('user.submitApplications'),
				hint: this.$t('storeManagement.reviewTips1')
			};
		},
		onLoad() {
			//获取主播申请单
			
			this.getAnchornote();
			this.form.avatar = this.vuex_user_info.avatar;
			this.avatar = this.$u.file.getMedieUrl(this.vuex_user_info.avatar);
			this.getAreaCode();
			
			
		
			
		},
		methods: {
			asss(e) {
				console.log(e);
				this.phoneAreaNumber = Number(e);
			},

			// 验证码
			codeChange(text) {
				this.tips = text;
			},
			codeChange2(text) {
				this.tips2 = text;
			},
			confirmArea(e) {
				console.log(e);
				this.phoneAreaNumber = e[0].value;
			},
			//获取国际区号
			getAreaCode() {
				this.$u.get('/app/user/getInternationalTelephoneAreaCode').then((res) => {
					console.log('quhao', res);
					this.countries = res.data;
				});
			},
			//手機验证码
			getCode() {
				if (this.phoneNumber) {
					if (typeof this.phoneAreaNumber === 'number') {
						this.form.phone = this.phoneAreaNumber + '-' + this.phoneNumber;
						console.log(111, this.form.phone);
						if (this.$refs.uCode.canGetCode) {
							uni.showLoading({
								title: this.$t('storeManagement.verification')
							});
							this.$u.post(`/app/user/sendMessage/${this.form.type}/${this.form.phone}`).then((res) => {
								console.log(res.data);
								// this.registerData.cmsCode=res.data
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								this.$u.toast(this.$t('storeManagement.verificationSent'));
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							});
						} else {
							this.$u.toast(this.$t('storeManagement.countdownOver'));
						}
					} else {
						this.$u.toast(this.$t('storeManagement.selectNumber'));
					}
				} else {
					this.$u.toast(this.$t('storeManagement.fillMobile'));
				}
			},
			//郵箱验证码
			getCode2() {
				if (this.form.email) {
					console.log(111, this.form.email);
					if (this.$refs.uCode2.canGetCode) {
						uni.showLoading({
							title: this.$t('storeManagement.verification')
						});
						this.$u.post(`/app/anchor/sendMail/${this.form.email}`).then((res) => {
							console.log(res.data);
							// this.registerData.cmsCode=res.data
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast(this.$t('storeManagement.verificationSent'));
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode2.start();
						});
					} else {
						this.$u.toast(this.$t('storeManagement.countdownOver'));
					}
				} else {
					this.$u.toast(this.$t('storeManagement.fillEmail'));
				}
			},
			//上传文件
			upload(type) {
				if (this.buttonText == this.$t('user.submitApplications')) {
					this.$u.file
						.fileUpload('user_img')
						.then((res) => {
							console.log(res);
							uni.hideLoading();
							// 身份证正面
							if (type == 1) {
								this.form.carAfter = res.fileName;
								this.carAfter = this.$u.file.getMedieUrl(res.fileName);
							}
							// 身份证反面
							if (type == 2) {
								this.form.carBefore = res.fileName;
								this.carBefore = this.$u.file.getMedieUrl(res.fileName);
							}
							// 护照
							if (type == 3) {
								this.form.passportPage = res.fileName;
								this.passportPage = this.$u.file.getMedieUrl(res.fileName);
							}
							
						})
						.catch((err) => {});
				}
			},
			//提交申请
			submit() {
				this.form.phone = this.phoneAreaNumber + '-' + this.phoneNumber;
				if (this.buttonText == this.$t('user.submitApplications')) {
					if (!this.form.firstName || !this.form.lastName) {
						this.$u.toast(this.$t('addAddress.allNameTips'));
						return;
					}
					// if (!this.form.carNum) {
					// 	this.$u.toast(this.$t('addAddress.nameAllTips'));
					// 	return;
					// }
					if (!this.form.documentType) {
						this.$u.toast(this.$t('user.documentType'));
						return;
					} else {
						if (this.form.documentType == '2' && (!this.form.carAfter || !this.form.carBefore)) {
							this.$u.toast(this.$t('user.uploadCard'));
							return;
						} else if (this.form.documentType == '1' && !this.form.passportPage) {
							this.$u.toast(this.$t('user.uploadCard'));
							return;
						}
					}

					if (!this.phoneNumber) {
						this.$u.toast(this.$t('addAddress.mobileTips'));
						return;
					}

					if (typeof this.phoneAreaNumber !== 'number') {
						this.$u.toast(this.$t('addAddress.selectNumber'));
						return;
					}


					if (!this.form.smsCode) {
						this.$u.toast(this.$t('modify.codeInfo'));
						return;
					}



					if (!this.phoneAreaNumber) {
						this.$u.toast(this.$u.toast(this.$t('storeManagement.selectNumber')));
						return;
					}

					this.$u.post('/app/anchor/submit', this.form).then((res) => {
						this.$u.toast(this.$t('storeManagement.ReviewTips'));
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/user/user'
							})
						},1500)
					});
				}

				if (this.buttonText == this.$t('user.ClickToSign')) {
					this.$u.route('/pages/storyType/contractSignature', {
						type: 'anthor'
					});
				}
			},
			getAnchornote() {
				this.$u.get('/app/anchor/getApply').then((res) => {
					if(res.data){
							if (res.data.status == '待审核' || res.data.status == '待签约') {
						let array = res.data.phone.split('-');
						this.phoneAreaNumber = array[0];
						this.phoneNumber = array[1];
						this.form = res.data;
						this.carAfter = this.$u.file.getMedieUrl(res.data.carAfter);
						this.carBefore = this.$u.file.getMedieUrl(res.data.carBefore);
						this.passportPage = this.$u.file.getMedieUrl(res.data.passportPage);
						this.buttonText = this.$t('storeManagement.UnderReview');
					}
					if (res.data.status == '待签约') {
						this.buttonText = this.$t('user.ClickToSign');
						this.hint = this.$t('orderDetails.Approved');
					}
					if (res.data.status == '已完成') {
						this.$u.route('/pages/anchorConsole/anchorConsole');
					}
					}else{
						this.$u.get('/app/shop').then(res => {
							if(res.data){
								this.phoneAreaNumber=Number(res.data.phoneCountryCode)
								this.phoneNumber=res.data.phone
								this.form.documentType =String(res.data.documentType)
								this.form.lastName =res.data.name
								this.form.firstName =res.data.firstName
								this.form.lastName =res.data.name
								this.carAfter = this.$u.file.getMedieUrl(res.data.cardFrontUrl);
								this.form.carAfter = res.data.cardFrontUrl
								this.carBefore = this.$u.file.getMedieUrl(res.data.cardTheBackUrl);
								this.form.carBefore = res.data.cardTheBackUrl
								this.passportPage = this.$u.file.getMedieUrl(res.data.photoUrl);
								this.form.passportPage = res.data.photoUrl
							}else{
								if (this.phoneAreaNumber == 1) {
									let array = this.vuex_user_info.mobile.split('-');
									this.phoneAreaNumber = Number(array[0]);
								}
								if (!this.phoneNumber) {
									if(this.vuex_user_info.mobile==""){
																		
									}else{
										
										let array = this.vuex_user_info.mobile.split('-');
										this.phoneNumber = array[1];
									}
									
								}
							}
						
						})
					}
				
				});
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	$line-spacing: 42rpx;
	$m-t: 58rpx;
	$m-b: 30rpx;

	.container-box {
		.top {
			margin-bottom: $line-spacing;

			.box {
				width: 560rpx;
				height: 108rpx;
				background: #ffffff;
				box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;
				margin: 0 auto;
				display: flex;
				align-items: center;
				padding: 0 24rpx;
				position: relative;

				uni-text {
					font-size: 28rpx;

					&:nth-child(1) {
						font-size: 24rpx;
						color: #91909a;
						width: 110rpx;
					}

					&:nth-child(2) {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}

		.title-input {
			margin-bottom: $line-spacing;
		}

		.title {
			margin-top: $m-t;
			margin-bottom: $m-b;
			display: block;
		}

		.upload {
			display: flex;
			justify-content: center;

			.file {
				width: 324rpx;
				margin-right: 20rpx;

				.info {
					width: 324rpx;
					height: 160rpx;
					background: #e1e4e8;
					border-radius: 8rpx 8rpx 0rpx 0rpx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
				}

				.hint {
					width: 324rpx;
					height: 52rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					color: #fff;
					text-align: center;
					line-height: 52rpx;
					font-size: 28rpx;
				}
			}
		}

		.mb {
			margin-bottom: $m-t;
		}
	}

	.footer {
		.hint {
			text-align: center;
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>